<ng-template #sidebox>
  <nz-card [nzBordered]="false">
    <div
      class="d-flex align-items-center px-md py-sm text-hover point"
      [ngClass]="{ 'bg-grey-lighter font-weight-bold': type === 1 }"
      (click)="type = 1"
    >
      <i nz-icon nzType="calendar" class="mr-sm"></i>Inbox
    </div>
    <div
      class="d-flex align-items-center px-md py-sm text-hover point"
      [ngClass]="{ 'bg-grey-lighter font-weight-bold': type === 2 }"
      (click)="type = 2"
    >
      <i nz-icon nzType="calendar" class="mr-sm"></i>Today
    </div>
    <div
      class="d-flex align-items-center px-md py-sm text-hover point"
      [ngClass]="{ 'bg-grey-lighter font-weight-bold': type === 3 }"
      (click)="type = 3"
    >
      <i nz-icon nzType="calendar" class="mr-sm"></i>Next 7 days
    </div>
    <nz-tabset class="mt-sm">
      <nz-tab nzTitle="Projects">
        <ul class="list-unstyled mx-md" style="margin-top: -8px">
          <li class="pt-sm text-hover point" (click)="msg.success('design')">Website design</li>
          <li class="pt-sm text-hover point" (click)="msg.success('improvement')">SEO improvement</li>
          <li class="pt-sm text-hover point" (click)="msg.success('redesign')">example.com redesign</li>
          <li class="pt-md">
            <button nz-button nzType="dashed" nzSize="small" (click)="msg.success('ok')">
              <i nz-icon nzType="plus"></i>
              Add project
            </button>
          </li>
        </ul>
      </nz-tab>
      <nz-tab nzTitle="Tags">
        <ul class="list-unstyled mx-md" style="margin-top: -8px">
          <li class="pt-sm text-hover point" (click)="msg.success('Processing')">
            <nz-badge nzStatus="processing" nzText="Processing"></nz-badge>
          </li>
          <li class="pt-sm text-hover point" (click)="msg.success('Success')">
            <nz-badge nzStatus="success" nzText="Success"></nz-badge>
          </li>
          <li class="pt-sm text-hover point" (click)="msg.success('Error')">
            <nz-badge nzStatus="error" nzText="Error"></nz-badge>
          </li>
          <li class="pt-sm text-hover point" (click)="msg.success('Warning')">
            <nz-badge nzStatus="warning" nzText="Warning"></nz-badge>
          </li>
          <li class="pt-md">
            <button nz-button nzType="dashed" nzSize="small" (click)="msg.success('ok')">
              <i nz-icon nzType="plus"></i>
              Add tag
            </button>
          </li>
        </ul>
      </nz-tab>
    </nz-tabset>
  </nz-card>
</ng-template>
<ng-template #taskTpl let-item>
  <div class="task__container p-lg">
    <h3 class="task__title">{{ item.title }}</h3>
    <div class="task__list" [attr.data-id]="item.id" cdkDropList [cdkDropListData]="item.list" (cdkDropListDropped)="drop($event)">
      <div *ngFor="let i of item.list; let idx = index" cdkDrag class="task__item">
        <label nz-checkbox [(ngModel)]="i.done" name="i.done">
          <span [ngClass]="{ 'task__item-done': i.done }" class="mr-sm">{{ i.title }}</span>
          <nz-tag *ngIf="i.label" [nzColor]="i.label.color">{{ i.label.text }}</nz-tag>
          <nz-tag *ngIf="!i.done && i.due">{{ i.due }}</nz-tag>
        </label>
        <div class="d-flex align-items-center">
          <i nz-icon nzType="fullscreen" class="task__item-handle" cdkDragHandle></i>
          <span nz-dropdown [nzDropdownMenu]="taskMenu" nzPlacement="bottomRight" class="dd-btn">
            <i nz-icon nzType="ellipsis"></i>
          </span>
          <nz-dropdown-menu #taskMenu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item (click)="msg.success('edit')">Edit</li>
              <li nz-menu-item nz-popconfirm nzPopconfirmTitle="确定吗？" (nzOnConfirm)="del(item, i, idx)"> Remove </li>
            </ul>
          </nz-dropdown-menu>
        </div>
      </div>
    </div>
  </div>
</ng-template>
<page-header-wrapper>
  <div nz-row nzGutter="32">
    <div nz-col nzMd="8" nzLg="8" nzXl="6">
      <ng-container *ngIf="!brand.isMobile; else sidebox">
        <nz-affix [nzOffsetTop]="brand.fixedHeader ? 80 : 24">
          <ng-template [ngTemplateOutlet]="sidebox"></ng-template>
        </nz-affix>
      </ng-container>
    </div>
    <div nz-col nzMd="16" nzLg="16" nzXl="18">
      <nz-card [nzTitle]="opTpl" class="border-0 ant-card__body-nopadding">
        <ng-template #opTpl>
          <button (click)="msg.success('add task')" nz-button nzType="primary"> <i nz-icon nzType="plus"></i>Add task </button>
          <button (click)="msg.success('clean')" nz-button><i nz-icon nzType="close"></i>Clean</button>
        </ng-template>
        <div cdkDropListGroup>
          <div
            *ngFor="let item of list"
            cdkDropList
            [cdkDropListData]="item.list"
            (cdkDropListDropped)="drop($event)"
            class="task__container p-lg"
          >
            <h3 class="task__title">{{ item.title }}</h3>
            <div class="task__list" [attr.data-id]="item.id">
              <div *ngFor="let i of item.list; let idx = index" cdkDrag class="task__item">
                <label nz-checkbox [(ngModel)]="i.done" name="i.done">
                  <span [ngClass]="{ 'task__item-done': i.done }" class="mr-sm">{{ i.title }}</span>
                  <nz-tag *ngIf="i.label" [nzColor]="i.label.color">{{ i.label.text }}</nz-tag>
                  <nz-tag *ngIf="!i.done && i.due">{{ i.due }}</nz-tag>
                </label>
                <div class="d-flex align-items-center">
                  <i nz-icon nzType="fullscreen" class="task__item-handle" cdkDragHandle></i>
                  <span nz-dropdown [nzDropdownMenu]="taskMenu" nzPlacement="bottomRight" class="dd-btn">
                    <i nz-icon nzType="ellipsis"></i>
                  </span>
                  <nz-dropdown-menu #taskMenu="nzDropdownMenu">
                    <ul nz-menu>
                      <li nz-menu-item (click)="msg.success('edit')">Edit</li>
                      <li nz-menu-item nz-popconfirm nzPopconfirmTitle="确定吗？" (nzOnConfirm)="del(item, i, idx)"> Remove </li>
                    </ul>
                  </nz-dropdown-menu>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nz-card>
    </div>
  </div>
</page-header-wrapper>
